/*---------定义变量----------*/
@base: 0.1;
/*---------全局样式重置----------*/
body,
div,
header,
footer,
form,
ul,
ol,
li,
dl,
dt,
dd,
p,
pre,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
blockquote,
fieldset,
lengend,
section,
button,
textarea,
th,
td {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
    width: 100%;
    height: 100%;
    font-size: 100px;
}
body{
    width: 100%;
    height: 100%;
}
/* 表单控件没有亮线 */
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  outline: none;
  font: inherit;
  border: none;
}
/* 表格边框和元素间距清空 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
li {
  list-style: none;
}
u,
a {
  text-decoration: none;
}
em {
  font-style: normal;
}
img {
  border: none;
  margin: 0;
  padding: 0;
}
/*-----全局重置结束-------*/
/*----------适配开始--------*/
@media screen and (max-width: 320px) {
  html {
    font-size: 85.33px;
  }
}
@media screen and (min-width: 320px) {
  html {
    font-size: 85.33px;
  }
}
@media screen and (min-width: 370px) {
  html {
    font-size: 100px;
  }
}
@media screen and (min-width: 410px) {
  html {
    font-size: 110px;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 130px;
  }
}
@media screen and (min-width: 560px) {
  html {
    font-size: 150px;
  }
}
@media screen and (min-width: 640px) {
  html {
    font-size: 170px;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 200px;
  }
}
@media screen and (min-width: 768px) {
  html {
    font-size: 204.8px;
  }
}
/*----------适配结束----------*/

/*----------布局结束----------*/
body {
  font-size: @base*1.6rem;
  background: #fff;
}
#content{
    width: 100%;
}
header{
    width: 100%;
    height: @base*4.4rem;
    line-height: @base*4.4rem;
    background: #1B1A20;
    color: #fff;
    position: fixed;
    z-index: 1000;
    .icon-fanhui{
        width: @base*1rem;
        height: @base*1.8rem;
        position: absolute;
        left: @base*1.5rem;
    }
    .icon-shenglve{
        position: absolute;
        right: @base*1.5rem;
    }
    p{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        text-align: center;
        color:#FFFFFF;
        font-size: @base*1.7rem;
    }
}
.advertising{
    width: 100%;
    background: #333333;
    text-align: center;
    padding: @base*.9rem 0;
    position: fixed;
    top: @base*4.4rem;
    z-index: 1000;
    >h3{
        font-size: @base*1.6rem;
        color: #fff;
    }
    >p{
        margin-top: @base*.2rem;
        font-size: @base*1.4rem;
        color: #999999;
    }
    >button{
        position: absolute;
        right: @base*1rem;
        bottom: @base*1rem;
        width: @base*7.9rem;
        top: @base*1rem;
        background: #fff;
        border-radius: @base*.7rem;
        color: #F63B09;
    }
    >img{
        width: @base*3.3rem;
        height: @base*3.3rem;
        position: absolute;
        top: @base*1.4rem;
        left: @base*3.3rem;
    }
}
#roasting{
    width: 100%;
    height: @base*37.5rem;
    border-bottom:@base*.6rem solid #EFEFF4;
    position: relative;
    top: @base*10.4rem;
    
    img{
        width: 100%;
        height: 100%;
    }
}
.shopping-information{
    position: relative;
    top: @base*10rem;
    width: 100%;
    padding: @base*1.5rem  @base*1rem;
    border-bottom:@base*.6rem solid #EFEFF4;
    >h3{
        font-size: @base*1.8rem;
        color: #333;
        font-weight: 400;
        padding: @base*.3rem 0;
    }
    >.prompting{
        font-size: @base*1.2rem;
        color: #999;
        padding: @base*.3rem 0;
    }
    >.sales-price{
        padding: @base*.3rem 0;
        &:after{
            content: "";display: block;clear: both;visibility: hidden;height: 0;
        }
        >.sales-price-left{
            font-size: @base*1.8rem;
            color: #F50C0C;
            float: left;
        }
        >.sales-price-right{
            font-size: @base*1.2rem;
            color: #999;
            float: right;
        }      
    }
    >ul{
        width: 100%;
        justify-content: space-between;
        display: flex;
        font-size: @base*1.2rem;
        >li{
            color: #999999;
            i{
                color: #F42424;
                vertical-align: middle;
            }
        }
    }
}
.shopping-image{
    position: relative;
    top: @base*12rem;
    width: 100%;
    padding: @base*1.5rem  @base*1rem;
    border-top:@base*.6rem solid #EFEFF4;
}

.apprise{
    position: relative;
    top: @base*10rem;
    padding: 0 @base*1rem;
    >p{
        width: 100%;
        height: @base*4rem;
        line-height: @base*3.4rem;
        &:after{
            content: "";display: block;clear: both;visibility: hidden;height: 0;
        }
        >i{
            float: right;
            font-size: @base*2.2rem;
             color: #333;
        }
    }
    >section{
        padding-bottom: @base*1.4rem;
        >dl{
            width:100%;
            display: flex;
            dt{
                width: @base*3.3rem;
                height: @base*3.3rem;
                img{
                    width: 100%;
                }
            }
            dd{
                padding-left: @base*1rem;
                font-size: @base*1.2rem;
                color: #999;
                .telphone{
                    font-size: @base*1.2rem;
                    color: #999;
                }
                .time{
                    font-size: @base*1rem;
                    color: #A9A9A9;
                }
            }
        }
        >div{
            font-size: @base*1.5rem;
            color: #999;
        }
    }
    .download{
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 0 @base*1rem;
        button{
            width: 100%;
            height: @base*4rem;
            line-height: @base*4rem;
            color: #FFFFFF;
            background: #333333;
            border-radius: @base*.5rem;
            font-size:@base*1.5rem;
        }
    }
    
}
/*----------布局结束----------*/
